<template>
  <el-container>
    <el-header style="height: 100px">
      <HeaderCom></HeaderCom>
    </el-header>
    <el-container>
      <el-aside
          :style="{ width: sidebarWidth + 'px' , height: 'calc(100vh - 120px)',}"
          v-if="$route.meta.showSidebar"
      >
        <div style="width: 80%; margin: 0 auto">
          <NavMenu></NavMenu>
        </div>
      </el-aside>
      <!-- 拖动手柄，放在 aside 和 main 之间 -->
      <el-icon class="resizer">
      </el-icon>
      <el-main
          :style="{
          width: `calc(100vw - ${sidebarWidth}px - 200px)`,
          height: 'calc(100vh - 120px)',
        }"
          class="main"
      >
        <div class="login-register-container">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import HeaderCom from '@/components/HeaderCom.vue'
import '@/assets/style/header.css'
import NavMenu from '@/components/NavMenu.vue'

export default {
  components: {
    HeaderCom,
    NavMenu,
  },
  name: 'MainLayout',
  data() {
    return {
      sidebarWidth: 200, // 初始侧边栏宽度
      isResizing: false, // 是否正在调整大小
    }
  },
  methods: {
    startResize(event) {
      this.isResizing = true
      const startX = event.clientX
      const startWidth = this.sidebarWidth

      const doResize = (moveEvent) => {
        if (this.isResizing) {
          this.sidebarWidth = startWidth + moveEvent.clientX - startX
        }
      }

      const stopResize = () => {
        if (this.isResizing) {
          document.removeEventListener('mousemove', doResize)
          document.removeEventListener('mouseup', stopResize)
          this.isResizing = false
        }
      }

      document.addEventListener('mousemove', doResize)
      document.addEventListener('mouseup', stopResize)
    },
  },
}
</script>
